<template>
  <div class="block">
    <el-timeline>
      <el-timeline-item  v-for="(log, index ) in logList" placement="top" :key="index" :color="log.nodeColor" :timestamp="log.createTime">
        <el-card>
          <el-descriptions class="margin-top" :title="log.operationTitle" :column="4" direction="vertical">
            <el-descriptions-item label="操作人">{{ log.username}}</el-descriptions-item>
            <el-descriptions-item label="操作时间">{{ log.createTime}}</el-descriptions-item>
            <el-descriptions-item label="操作行为" > {{ log.operationInfo }}</el-descriptions-item>
          </el-descriptions>          
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-pagination
      background
      layout="total,prev,sizes, pager, next,jumper"
      :total="total"
      :page-sizes="[3, 5, 10, 20]"
      :page-size.sync="formSearch.pageSize"
      :current-page.sync="formSearch.pageNum"
      @current-change="page"
      @size-change="page"
      style="float: right">
    </el-pagination>
  </div>
</template>

<script>
import log from "../../api/log"
import {getUserId} from '@/utils/auth'

export default {
  name: "business",
  data(){
    return {
      logList:{},
      formSearch:{
        pageNum:1,//当前页
        pageSize:3,//每页记录数     
        userId:getUserId()
      },
      total:0
    }
  },
  methods:{
    async page(){
      const res = await log.queruOperationLog(this.formSearch);
      this.logList=res.data.data.records
      this.total = res.data.data.total
    }
  },
  created(){
    this.page();
  },
}
</script>

<style scoped>
.span_info{
  font-size: 10px;
  color: coral;
}


</style>
